import "./App.css"
import {
    BrowserRouter,
    Routes,
    Route,
    NavLink,
} from "react-router-dom";


import routes from "./router"


function App() {
    return (
        <BrowserRouter>
            <div>
                {/* 点击让路由发生变化 */}
                <ul>
        
                    <li><NavLink to="/home"  className={ ({ isActive }) =>isActive ? "aaa" : "" }>首页</NavLink></li>
                    <li><NavLink to="/classify" className={ ({ isActive }) =>isActive ? "bbb" : "" }>分类</NavLink></li>
                    <li><NavLink to="/car" className={ ({ isActive }) =>isActive ? "aaa" : "" }> 购物车</NavLink></li>
                </ul>

                {/* 根据路由地址 加载对应组件 */}
                <div>
                    <Routes>
                      
                       {
                        routes.map((v,i)=> <Route path={v.path} element={v.element} key={i}></Route>)
                       }
                      
                       
                    </Routes>

                </div>
            </div>
        </BrowserRouter>
    )
}

export default App